The app bar is one of the most-used components in all kinds of applications. It can be used to house a search field, buttons to navigate between pages, or simply the title of the page. Since it’s such a commonly used component, Flutter provides a dedicated widget for this functionality called AppBar.

In this tutorial, we’ll show you how to customize the AppBar in a Flutter app by walking through some practical examples.

Here’s what we’ll cover:

Flutter AppBar is an app component built in accordance with Material Design guidelines. It’s usually placed at the top of the screen and has the ability to contain other widgets within its layout. The AppBar commonly displays branding information such as logos and titles and often contains buttons or other points of user interaction.

Here’s what the default AppBar looks like in Flutter:

Pretty blank, right? Let’s go ahead and customize it to our liking.

In Flutter, the AppBar’s layout mainly comprises three components: leading, title, and actions. leading is placed at the leftmost position of the AppBar; title and actions appear to its right.

leading takes in a widget and can be assigned anything — text, an icon, or even multiple widgets within a row.

You can control how much width leading can take:

If leading is not provided, AppBar implies it for us automatically. Examples include a navigation arrow to go back to the previous page or a menu icon to open the drawer.

The navigation arrow appears automatically when a previous route is available.

When we add a Drawer to the Scaffold, a menu icon is assigned to leading to open the drawer.

If desired, this behavior can be prevented by making automaticallyImplyLeading false.

As the name suggests, it’s mostly used for showing titles, such as the app title or a page header.

But you’re not limited to that since title takes a widget as well. You can use it to show icons, images, shapes, or any combination of these using layout widgets such as row and column.

Here’s an example:

By default, title is aligned to the left of AppBar, per Material guidelines. You can change this to align it in the center:

actions is a list of widgets that are aligned to the right of AppBar. We usually see them in apps used as buttons to trigger dropdown menus, profile avatars, etc.

Let’s add one more widget to the list:

Now that we’re familiar with AppBar’s layout, let’s take the customization to the next level by playing with theming options. AppBar contains all sorts of properties, including colors, sizes, icon themes, text themes, and more.

The following code changes the background color of AppBar to deep orange. 500 is added to access a particular shade of the color, 900 being the darkest and 50 being the lightest.

The code below changes the icon’s color to green and size to 36:

Let’s say you want to change the text color to amber with a lighter shade of 200 and set the font size to 24:

If you want to give the AppBar a little boost, you can use elevation. The following code increases the elevation of AppBar to 15.

Notice that AppBar is lifted up and the shadow spans a larger area.

You can even mess around with the color of the drop shadow. The code below changes AppBar’s shadow color to orangeAccent.

Pretty cool, right?

Finally, we have the toolbar properties. The toolbar comprises text, icons, buttons, and anything else that’s in the foreground, except for widgets such as Container and Image.

To change the height and opacity of AppBar’s toolbar items:

If you’ve made it this far, you should now understand:

So here we have it! A complete walkthrough on everything Flutter’s AppBar has to offer. I hope this article helps you create beautiful AppBars in all your future Flutter apps.

Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.